<template>

  <div id="user">
    <div class="top">
      <div class="user">
        <div class="user-photo">
        </div>
        <div class="username">
          <h2>ad呵呵</h2>
          <a href="#">申请认证</a>
        </div>
      </div>
      <div class="info">
        <div class="dong">
          <p>54442</p>
          <p>动态</p>

        </div>
        <div class="like">
          <p>15</p>
          <p>关注</p>
        </div>
        <div class="fans">
          <p>78</p>
          <p>粉丝</p>
        </div>
      </div>

    </div>
    <van-grid>
      <van-grid-item icon="newspaper-o" text="我的作品" />
      <van-grid-item icon="star-o" text="我的收藏" />
      <van-grid-item icon="tosend" text="阅读历史" />
    </van-grid>
    <van-cell-group >
      <van-cell icon='edit' title="编辑资料" is-link />
      <van-cell icon='chat-o' title="小智同学" is-link />
      <van-cell icon='setting-o' title="系统设置" is-link />
      <van-cell icon='warning-o' title="退出登录" @click="Exit" is-link />
    </van-cell-group>

    <van-popup v-model="show">内容</van-popup>

    <!-- <van-button type="primary" @click="exit">退出</van-button> -->
  </div>
</template>

<script>
import { removeItem } from '@/utils/storage.js'
// import { Dialog } from 'vant'
export default {
  name: 'user',
  data () {
    return {
      show: false
    }
  },
  // components: {
  //   [Dialog.Component.confirm]: Dialog.Component
  // },
  methods: {
    Exit () {
      this.$dialog({
        title: '标题',
        message: '弹窗内容'
      })
        .then(() => {
          // on confirm
          this.$router.push('/login')
          removeItem('token')
        })
        .catch(() => {
          // on cancel
        })
    // }
    }
  }
}

</script>

<style lang='scss' >
*{
  padding: 0;
  margin: 0;
}
#user{
  .top{
    height: 150px;
    width: 100%;
    padding-top:10px ;
    background-color: rgb(50, 150, 250);
    .user{
      height: 100px;
      width: 100%;
      // background-color: #fff;
      .user-photo{
        float: left;
        height: 80px;
        width: 80px;
        border-radius: 50%;
        background-color: green;
        // margin-top: 10px;
        margin-left: 10px;
      }
      .username{
        float: left;
        font-size: 13px;
        margin-left: 20px;
        color: #fff;
        margin-top: 20px;
        p{
          font-size: 20px;
        }
        a{
          display: block;
          width: 60px;
          height: 20px;
          background-color: #fff;
          text-align: center;
          border-radius:3px ;
        }
      }
    }
    .info{
      display: flex;
      justify-content: space-around;
      p{
        // height: 25px;
        font-size: 15px;
        text-align: center;
        color: #fff;
      }
    }
  }
  .van-grid{
    justify-content: space-around;
    .van-grid-item__text{
      font-weight: bold;
    }
    .van-icon-newspaper-o::before{
      color:rgb(120, 171, 255)
    }
    .van-icon-star-o::before{
      color:rgb(255, 2, 7)
    }
    .van-icon-tosend::before{
      color:rgb(255, 177, 21)
    }
  }
  .van-popup{
    width: 100px;
    height: 80px;
  }
}

</style>
